<div class="commingpage js_close" style="display:none;" >
    <div class="confirm" >
        <div class="landing_title"><i class="iconfont icon-guanbi" onclick="closeconfrim()"></i></div>
        <p class="landing_title_tt js_nullTip">确定此操作吗？</p>
        <input type="button" value="确定" class="isokk" onclick="closeconfrim()">
    </div>
</div>
<div class="commingpage js_uploadconfirm" style="display:none;" >
    <div class="confirm" >
        <div class="landing_title"><i class="iconfont icon-guanbi" onclick="updatehtml()"></i></div>
        <p class="landing_title_tt js_uploadConfirmTip">确定此操作吗？</p>
        <input type="button" value="确定" class="isokk" onclick="updatehtml()">
    </div>
</div>


<div class="upload_page" id="upload_page" >
        <div class="upload_page_title">
            <span>上传歌曲</span>
            <span class="up_landing_title" id="upload"><i class="iconfont icon-guanbi"></i></span>
        </div>
        <div class="upload_page_file upload_page_title">
            <form class="page_file" id="formid"  enctype="multipart/form-data" method="post">
                <div class="test">
                    <span>选择文件</span>  
                    <span class="filename js_filename"></span> 
                </div>
                <!--  accept="audio/*" -->
                <input type="file" name="file" class="js_fileinput"  multiple="multiple" accept="audio/mpeg">

                <!-- <button>上传</button> -->
            </form>
        </div>
        <div class="upload_page_list page_list_test">
            <ul class="uplist_title firsttitle">
                <li>文件名称</li>
                <li>文件大小</li>
                <li>文件后缀</li>
                <li>操作</li>
            </ul>
            <ul class="uplist_list uplist_title js_uplist">
                
            </ul> 
        </div>
        <div class="footer_buttom">
            <input type="button" onclick="uploadmusic()" value="上传" class="js_uploading uploding_button">            
        </div>
        <div class="uploadtip js_uploadtip"></div>
    </div>

    <script type="text/javascript" src="js/upload.js"></script>
    <script>
        let uploadFile = {
            init(){
                this.fileUpload();
            },
            //上传文件按钮
            fileUpload(){
                var y ;
                var $this = this;
                $(".js_fileinput").change(function(){
                    $(this).data("file",null);
                    y = $(".js_fileinput").prop('files');
                    y =Array.from(y)
                    var len = y.length;
                    var arrFile = [];
                    var html = '';
                    for(var i=0;i<len;i++){
                        // arrFile.push(y[i].name);
                        $(".js_filename").text(html);
                        //字符串截取  Slice(start,end)如果start的值是一个负数的，那么开始位置等于：lenght+start，同理end如果是负数的话就是:length+end
                        var songName = y[i].name;
                        var test1 = songName.slice(-4);
                        //将字节转换为MB
                        html += `
                                <li>
                                    <span style=" display :inline-block ;height:40px;overflow: hidden;textOverflow: ellipsis;whiteSpace: nowrap" title=${y[i].name}; >${y[i].name.split(".")[0]}</span>
                                    <span>${(y[i].size /(1024 * 1024)).toFixed(2)}MB</span>
                                    <span>${y[i].name.slice(-4)}</span>
                                    <span class="js_delteupload" data-name="${y[i].name}">删除</span>
                                </li>
                            `
                    }
                    if(y.length == 1){
                        $(".js_filename").text(y[0].name);
                    }else if(y.length == 0){
                        $(".js_filename").text("未选择文件");
                    }else{
                        $(".js_filename").text(len +"个文件");
                    }
                    $(".js_uplist").html(html);
                });
                //删除功能
                $(".js_uplist").on("click",".js_delteupload",function(){
                    for(var i=0;i<y.length;i++){
                        if($(this).data("name") == y[i].name){
                            y.splice(i,1);
                            $(this).parent().remove();
                            $(".js_uploadtip").text("删除成功").fadeIn();
                            if(y.length == 1){
                                $(".js_filename").text(y[i].name);
                            }else if(y.length == 0){
                                $(".js_filename").text("未选择文件");
                            } else {
                                $(".js_filename").html(y.length +"个文件");
                            }
                            setTimeout(function(){
                                $(".js_uploadtip").fadeOut();
                            },2000);
                        }
                    }
                    $(".js_fileinput").data("file",y);

                })
                //上传
                $(".footer_buttom").on("click",".js_uploading",function(){
                })
            },
        }
        uploadFile.init();
    </script>